import React, { useEffect, useState } from 'react';
import { View, Text, Image } from '@tarojs/components';
import './index.less';
import TitleBar from '@/src/components/titleBar';
import store from '@/src/store';

export default function DraftBox() {
  const [showManage, setShowManage] = useState<boolean>(true);
  const [select, setSelect] = useState<boolean>(true);
  // const [page, setPage] = useState(1);
  // const [hasMore, setHasMore] = useState(true);
  // const [loading, setLoading] = useState(false);

  return (
    <View style={{ paddingTop: `${store.commonStore.pageAreaTop}rpx` }}>
      <TitleBar showLeftBack={true} title="草稿箱"></TitleBar>
      <View className="draftBox-container">
        <View className="draftBox-header">
          <View
            className="header-manage"
            onClick={() => {
              setShowManage(!showManage);
            }}
          >
            {showManage ? (
              <Image
                src="https://file.linkcook.cn/image/wineMiniProgram/mine/edit.png"
                className="edit"
              ></Image>
            ) : (
              <Image
                src="https://file.linkcook.cn/image/wineMiniProgram/home/done.png"
                className="done"
              ></Image>
            )}
            {<Text>{showManage ? '管理' : '完成'}</Text>}
          </View>
        </View>
        <View className="draftBox-contents">
          {/* 有图有文本----视频文本 */}
          <View className="content-item">
            {!showManage && (
              <Image
                onClick={() => {
                  setSelect(!select);
                }}
                src={
                  select
                    ? 'https://file.linkcook.cn/image/wineMiniProgram/login/checked.png'
                    : 'https://file.linkcook.cn/image/wineMiniProgram/login/unchecked.png'
                }
                className="selected"
              ></Image>
            )}
            <Image
              src="https://file.linkcook.cn/image/wineMiniProgram/home/demo.png"
              className="content-img"
            ></Image>
            <Image
              src="https://file.linkcook.cn/image/wineMiniProgram/home/play.png"
              className="play"
            ></Image>
            <View className="play-time">00:12</View>
            <View className="content-desc">
              <View className="content-title">
                今天品吸非古雪茄,今天品吸非古雪茄-----今天品吸非古雪茄今天品吸非古雪茄
              </View>
              <View className="content-date">
                <View className="content-type">动态</View>
                <Text>2025/06/18</Text>
              </View>
            </View>
            {showManage && <View className="publish">去发布</View>}
          </View>
          <View className="content-item">
            {!showManage && (
              <Image
                onClick={() => {
                  setSelect(!select);
                }}
                src={
                  select
                    ? 'https://file.linkcook.cn/image/wineMiniProgram/login/checked.png'
                    : 'https://file.linkcook.cn/image/wineMiniProgram/login/unchecked.png'
                }
                className="selected"
              ></Image>
            )}
            <Image
              src="https://file.linkcook.cn/image/wineMiniProgram/home/demo.png"
              className="content-img"
            ></Image>
            <View className="content-desc">
              <View className="content-title">[无文字内容]</View>
              <View className="content-date">
                <View className="content-type">文章</View>
                <Text>2025/06/18</Text>
              </View>
            </View>
            {showManage && <View className="publish">去发布</View>}
          </View>
          {/* 无图有文本 */}
          <View className="content-item noPic">
            {!showManage && (
              <Image
                onClick={() => {
                  setSelect(!select);
                }}
                src={
                  select
                    ? 'https://file.linkcook.cn/image/wineMiniProgram/login/checked.png'
                    : 'https://file.linkcook.cn/image/wineMiniProgram/login/unchecked.png'
                }
                className="selected"
              ></Image>
            )}
            <View className="content-desc">
              <View className="content-title">
                今天品吸非古雪茄,今天品吸非古雪茄-----今天品吸非古雪茄今天品吸非古雪茄
              </View>
              <View className="content-date">
                <View className="content-type">视频</View>
                <Text>2025/06/18</Text>
              </View>
            </View>
            {showManage && <View className="publish">去发布</View>}
          </View>
        </View>
        <View className="draftBox-footer"></View>
      </View>
    </View>
  );
}
